---
title: Veröffentliche deine Astro-Site auf Netlify
description: Wie du deine Astro-Website auf Netlify im Internet veröffentlichst.
type: deploy
i18nReady: true
---
[Netlify](https://netlify.com) bietet Hosting und serverlose Backend-Dienste für Webanwendungen und statische Websites. Jede Astro-Website kann auf Netlify gehostet werden!

Diese Anleitung enthält Anweisungen für die Veröffentlichung auf Netlify über die Benutzeroberfläche der Website oder das Netlify CLI.

## Projektkonfiguration

Dein Astro-Projekt kann auf drei verschiedene Arten auf Netlify bereitgestellt werden: als statische Website, als Server-gerenderte Website oder als (experimentelle) Edge-gerenderte Website.

### Statische Website

Dein Astro-Projekt ist standardmäßig eine statische Website. Du brauchst keine zusätzliche Konfiguration, um eine statische Astro-Site bei Netlify zu veröffentlichen.

### Adapter für SSR/Edge

Um SSR in deinem Astro-Projekt zu aktivieren und auf Netlify einzusetzen:

Füge [den Netlify-Adapter](/de/guides/integrations-guide/netlify/) hinzu, um SSR in deinem Astro-Projekt mit dem folgenden Befehl `astro add` zu aktivieren. Damit installierst du den Adapter und nimmst in einem Schritt die entsprechenden Änderungen an deiner Datei `astro.config.mjs` vor.

```bash
npx astro add netlify
```

Wenn du den Adapter stattdessen lieber manuell installieren möchtest, führe die folgenden zwei Schritte aus:

1. Installiere [den `@astrojs/netlify` Adapter](https://github.com/withastro/astro/tree/main/packages/integrations/netlify) mit deinem bevorzugten Paketmanager in die Abhängigkeiten deines Projekts. Wenn du npm verwendest oder dir nicht sicher bist, führe dies im Terminal aus:

    ```bash
      npm install @astrojs/netlify
    ```

1. Füge zwei neue Zeilen zu deiner Projektkonfigurationsdatei `astro.config.mjs` hinzu.

    ```js title="astro.config.mjs" ins={2, 5-6}
    import { defineConfig } from 'astro/config';
    import netlify from '@astrojs/netlify/functions';

    export default defineConfig({
      output: 'server',
      adapter: netlify(),
    });
    ```
 
    Um dein Projekt stattdessen mit [Netlify's experimentellen Edge-Funktionen](https://docs.netlify.com/netlify-labs/experimental-features/edge-functions/#app) zu rendern, ändere den Import von `netlify/functions` in der Astro-Konfigurationsdatei in `netlify/edge-functions`.
      ```js title="astro.config.mjs" ins={3} del={2}
      import { defineConfig } from 'astro/config';
      import netlify from '@astrojs/netlify/functions';
      import netlify from '@astrojs/netlify/edge-functions';

      export default defineConfig({
        output: 'server',
        adapter: netlify(),
      });
      ```

## Wie man veröffentlicht

Du kannst Netlify über die Benutzeroberfläche der Website oder über das Netlify CLI (Command Line Interface) einrichten. Das Verfahren ist für statische und SSR-Astro-Websites identisch.

### Website UI Veröffentlichung

Wenn dein Projekt in GitHub, GitLab, BitBucket oder Azure DevOps gespeichert ist, kannst du die Netlify-Website-UI verwenden, um deine Astro-Site bereitzustellen.

1. Klicke auf <kbd>Neue Website hinzufügen</kbd> in deinem [Netlify Dashboard](https://app.netlify.com/)

2. Wähle <kbd>Importiere ein bestehendes Projekt</kbd>

    Wenn du dein Astro-Repository von deinem Git-Anbieter importierst, sollte Netlify automatisch die richtigen Konfigurationseinstellungen für dich erkennen und vorausfüllen.

3. Vergewissere dich, dass die folgenden Einstellungen eingegeben wurden, und drücke dann auf die Schaltfläche <kbd>Deploy</kbd>:

    - **Build Command:** `astro build` oder `npm run build`
    - **Publish directory:** `dist`

 Nach der Veröffentlichung wirst du zur Website-Übersichtsseite weitergeleitet. Dort kannst du die Details deiner Website bearbeiten.

Alle zukünftigen Änderungen an deinem Quellcode-Repository lösen je nach deiner Bereitstellungskonfiguration Vorschau- und Produktionsveröffentlichungen aus.

#### `netlify.toml`-Datei

Du kannst optional eine neue Datei `netlify.toml` auf der obersten Ebene deines Projekt-Repositorys erstellen, um deinen Build-Befehl und dein Veröffentlichungsverzeichnis sowie andere Projekteinstellungen wie Umgebungsvariablen und Weiterleitungen zu konfigurieren. Netlify liest diese Datei und konfiguriert dein Deployment automatisch.

Um die Standardeinstellungen zu konfigurieren, erstelle eine Datei `netlify.toml` mit dem folgenden Inhalt:

```toml
[build]
  command = "npm run build"
  publish = "dist"
```

📚 Mehr Infos unter ["Deploying an existing Astro Git repository"](https://www.netlify.com/blog/how-to-deploy-astro/#deploy-an-existing-git-repository-to-netlify) auf Netlify's blog


### CLI-Veröffentlichung

Du kannst auch eine neue Website auf Netlify erstellen und dein Git-Repository einbinden, indem du das [Netlify CLI](https://cli.netlify.com/) installierst und verwendest.


1. Installiere Netlify's CLI global

    ```bash
    npm install --global netlify-cli
    ```

2. Starte das CLI und folge den Anweisungen, um dich anzumelden und Netlify zu autorisieren
3. Starte `netlify init` und folge den Anweisungen
4. Bestätige deinen Build-Befehl (`astro build`)

    Das CLI erkennt automatisch die Build-Einstellungen (`astro build`) und das Veröffentlichungsverzeichnis (`dist`) und bietet an, automatisch [eine `netlify.toml`-Datei](#netlifytoml-datei) mit diesen Einstellungen zu erzeugen.

5. Erstellen und Veröffentlichung durch Pushing zu Git

    Das CLI fügt dem Repository einen Veröffentlichungs-Schlüssel hinzu. Das bedeutet, dass deine Website jedes Mal, wenn du `git push` machst, automatisch auf Netlify neu aufgebaut wird.

📚 Mehr Details von Netlify unter [Deploy an Astro site using the Netlify CLI](https://www.netlify.com/blog/how-to-deploy-astro/#link-your-astro-project-and-deploy-using-the-netlify-cli)

### Node.js-Version festlegen

Wenn du ein Legacy [Build Image](https://docs.netlify.com/configure-builds/get-started/#build-image-selection) (Xenial) auf Netlify verwendest, stelle sicher, dass deine Node.js-Version eingestellt ist. Astro benötigt Version 16.12.0 oder höher.

Du kannst [deine Node.js-Version in Netlify angeben](https://docs.netlify.com/configure-builds/manage-dependencies/#node-js-and-javascript) mit:
- eine [`.nvmrc`](https://github.com/nvm-sh/nvm#nvmrc) Datei in deinem Basisverzeichnis.
- eine Umgebungsvariable `NODE_VERSION` in den Einstellungen deiner Website über das Netlify-Projekt-Dashboard.

## Netlify-Funktionen verwenden

Für die Verwendung von Netlify-Functions mit Astro ist keine besondere Konfiguration erforderlich. Füge ein `netlify/functions`-Verzeichnis zu deinem Projektstamm hinzu und folge [der Netlify-Functions-Dokumentation](https://docs.netlify.com/functions/overview/), um loszulegen!

## Beispiele

- [Wie man eine Astro-Site einrichtet](https://www.netlify.com/blog/how-to-deploy-astro/) - Netlify Blog
- [Bereitstellung einer Astro-Site mit Formularen, serverlosen Funktionen und Weiterleitungen](https://www.netlify.com/blog/deploy-an-astro-site-with-forms-serverless-functions-and-redirects/) - Netlify Blog
- [Bereitstellungs-Walkthrough-Video](https://youtu.be/GrSLYq6ZTes) - Netlify YouTube-Kanal
